/**
 * @description 使用mobx
 */

import React, { Component } from "react"
import { Provider, inject, observer } from "mobx-react"
import store from "@/store"

class ListWithMobx extends Component {
    render() {
        return (
            <Provider {...store}>
                <List />
            </Provider>
        )
    }
}

@inject("ModuleList")
@observer
class List extends Component {
    componentDidMount() {
        console.log("mobx props", this.props)
    }
    render() {
        const {
            state: { list },
            getListMobx
        } = this.props.ModuleList

        return (
            <div>
                <p>with mobx</p>
                <button onClick={getListMobx}>get list</button>

                <hr />
                <ol>
                    {list.map(v => (
                        <li key={v.id}>
                            <p>{v.title}</p>
                        </li>
                    ))}
                </ol>
            </div>
        )
    }
}

export default ListWithMobx
